@keyframes open {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(60px);
  }
}

@keyframes close {
  from {
    transform: translateX(60px);
  }
  to {
    transform: translateX(0);
  }
}

@switch-prefix: ~"@{css-prefix}-switch";
.@{switch-prefix} {
  &__checkbox {
    width: 126px;
    height: 66px;
    border-radius: 66px;
    padding: 1px;
  }
  &__checkbox--disabled {
    opacity: .3;
  }
  &__thumb {
    width: 64px;
    height: 64px;
    border-radius: 64px;
    background-color: #ffffff;
  }
  &__thumb--open {
    animation-name: open;
    animation-duration: 200ms;
    animation-fill-mode: forwards;
  }
  &__thumb--close {
    animation-name: close;
    animation-duration: 200ms;
    animation-fill-mode: forwards;
  }
}